<template>
<el-select :modelValue="cid" @update:modelValue="emit('update:cid', $event)"
    placeholder="选择分类" style="width: 240px" @change="onChange">
    <el-option
        v-for="item in cateList"
        :key="item.id"
        :label="item.cate_name"
        :value="item.id"
    />
</el-select>
</template>
<script setup>
import { ref, onMounted,defineExpose } from 'vue'
import { getCateList$ } from '@/api/article'

defineProps({
    cid:{
        type:[Number, String]
    }
})
const emit = defineEmits(['change','update:cid']);

const cateName = ref('')
const cateList = ref([])
const initCpt = async () => {
    const { code,data,message } = await getCateList$()
    if(code !== 0){
        ElMessage.error(message)
        return
    }
    /**
     * 请求来数据模型：[{id:11,cate_name:'',cate_alias:''}...]
     */
    cateList.value = [...data]
}

const getSelected = () => {
    return cateName.value
}
const onChange = val => {
    emit('change', val)
}
onMounted(() =>{
    initCpt()
})
defineExpose({
    getSelected
})
</script>